<script setup>
import { Delete, Edit } from '@element-plus/icons-vue'
import {
  getOwngoods,
  addOwngoods,
  upimage,
  deleteowngoods,
  searchCategory,
  getGoodsid,
  changeOwnsGoods
} from '/src/api/layout.js'
import { ref } from 'vue'
const owndata = ref([
  {
    id: '1',
    name: '测试',
    price: 10
  },
  {
    id: '2',
    name: '测试2',
    price: 20
  }
])
const options = ref([])
const formRef = ref()
const newgoodsdata = ref({
  name: '',
  image: '',
  price: '',
  categoryId: '',
  description: ''
})
const changegoodsdata = ref({
  id: '',
  name: '',
  image: '',
  price: '',
  categoryId: '',
  description: ''
})
const getdata = async () => {
  const res = await getOwngoods()
  owndata.value = res.data
}
getdata()
const getcategory = async () => {
  const res = await searchCategory()
  options.value = res.data
}
getcategory()
console.log(owndata.value)
const addGoods = async () => {
  const res = await addOwngoods(newgoodsdata.value)
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  getdata()
}
const onimage = async () => {
  const res = await upimage(fileToUpload.value)
  console.log(res)
  newgoodsdata.value.image = res.data
}
const onimage2 = async () => {
  const res = await upimage(fileToUpload.value)
  console.log(res)
  changegoodsdata.value.image = res.data
}
const uploadRef = ref()
const fileToUpload = ref()
const imgUrl = ref()
const onUploadFile = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    imgUrl.value = reader.result
  }
  fileToUpload.value = file.raw
  console.log(fileToUpload.value)
  onimage()
}
const newUrl = ref()
const onUploadFile2 = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    newUrl.value = reader.result
  }
  fileToUpload.value = file.raw
  console.log(fileToUpload.value)
  onimage2()
}
const deletGoods = async (id) => {
  // ElMessage.success('haha')
  const res = await deleteowngoods(id)
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  getdata()
}
const onEditChannel = async (id) => {
  dialogVisible2.value = true
  const res = await getGoodsid(id)
  changegoodsdata.value = res.data
  // console.log(changegoodsdata.value)
}
const editgoods = async () => {
  const res = await changeOwnsGoods(changegoodsdata.value)
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  getdata()
}
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const handleClose = () => {
  newgoodsdata.value = {}
  changegoodsdata.value = {}
  dialogVisible2.value = false
  dialogVisible.value = false
}
</script>
<template>
  <page-header title="商品管理">
    <template #extra>
      <el-button type="primary" @click="dialogVisible = true"
        >添加商品</el-button
      >
    </template>
    <el-table :data="owndata" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"></el-table-column>
      <el-table-column label="商品图片" prop="image">
        <template #default="{ row }">
          <img v-if="row.image" :src="row.image" alt="" />
          <img v-else src="@/assets/avatar.png" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>
      <el-table-column label="商品分类" prop="categoryName"></el-table-column>
      <el-table-column
        label="商品描述"
        show-overflow-tooltip
        prop="description"
      ></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            title="修改"
            @click="onEditChannel(row.id)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            title="删除"
            @click="deletGoods(row.id)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" style="height: 700px" />
      </template>
    </el-table>
    <el-dialog
      v-model="dialogVisible"
      title="添加商品"
      width="800px"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="6" :offset="3">
          <div style="">
            <el-upload
              ref="uploadRef"
              class="avatar-uploader"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="onUploadFile"
            >
              <img v-if="imgUrl" :src="imgUrl" class="avatar" />
              <img v-else class="avatar" src="@/assets/avatar.png" />
            </el-upload>
            <el-button
              type="success"
              :icon="Upload"
              size="large"
              @click="onimage"
              style="margin: 45px"
            >
              上传图片
            </el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form
            :model="newgoodsdata"
            :rules="rules"
            ref="formRef"
            label-width="50%"
            size="large"
            style="margin-left: auto; width: 400px"
          >
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="newgoodsdata.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="newgoodsdata.price"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="categoryId">
              <el-select
                v-model="newgoodsdata.categoryId"
                placeholder="请选择分类"
                size="large"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="商品描述" prop="description">
              <el-input v-model="newgoodsdata.description"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addGoods">添加商品</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible2"
      title="修改商品"
      width="800px"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="6" :offset="3">
          <div style="">
            <el-upload
              ref="uploadRef"
              class="avatar-uploader"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="onUploadFile2"
            >
              <img v-if="newUrl" :src="newUrl" class="avatar" />
              <img
                class="avatar"
                v-else-if="changegoodsdata.image"
                :src="changegoodsdata.image"
              />
              <img v-else class="avatar" src="@/assets/avatar.png" />
            </el-upload>
            <el-button
              type="success"
              :icon="Upload"
              size="large"
              @click="onimage2"
              style="margin: 45px"
            >
              上传图片
            </el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form
            :model="changegoodsdata"
            :rules="rules"
            ref="formRef"
            label-width="50%"
            size="large"
            style="margin-left: auto; width: 400px"
          >
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="changegoodsdata.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="changegoodsdata.price"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="categoryId">
              <el-select
                v-model="changegoodsdata.categoryId"
                placeholder="请选择分类"
                size="large"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="商品描述" prop="description">
              <el-input v-model="changegoodsdata.description"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="editgoods">修改商品</el-button>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible2 = false">取消</el-button>
              <el-button type="primary" @click="dialogVisible2 = false">
                确认
              </el-button>
            </div>
          </template>
        </el-col>
      </el-row>
    </el-dialog>
  </page-header>
</template>
<style lang="scss" scoped>
.avatar {
  height: 180px;
  width: 180px;
  border: 5px solid gray;
}
img {
  height: 140px;
  width: 140px;
}
.el-table {
  font-size: 18px; /* 设置你想要的字体大小 */
}
</style>
